<template>
  <div class="wrapper">
    <div class="wrapper_top">
      <img
        src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC83ZjUzNzQxOWNkYjdjOTM1MjJiYTFiZWIzMGVlMjE1Yi05MC53ZWJw.webp"
        alt=""
      />
    </div>
    <div class="wrapper_card" v-for="(item, index) in list" :key="index">
      <div class="card-title">{{ item.title }}</div>
      <div class="card-content">
        <div
          v-for="(child, index) in item.services"
          :class="['card-item', child.isLast ? 'no-border' : '']"
          :key="index"
        >
          <img :src="child.serviceImg" />
          <div class="item-title">{{ child.serviceTitle }}</div>
          <div class="item-desc">{{ child.serviceDesc }}</div>
          <div class="item-tip">{{ child.serviceTip }}</div>
          <div class="item-price">{{ child.servicePrice }}</div>
          <router-link
            to="/household/detail/desc"
            :class="['item-btn', child.isLast ? 'no-btn' : '']"
            >查看详情</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Household",
  data() {
    return {
      list: [
        {
          title: "保洁服务",
          services: [
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9mZGQ5OTM4ZmE2OWJiZTllMDcxMGFhOTQzN2EzM2JmZi00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "日常保洁",
              serviceDesc: "日常家庭清洁和整理",
              serviceTip: "不包括：外窗清洁、橱柜内部及家电深度清洁。",
              servicePrice: "50元起",
            },
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS83Yjc3Zjg4ZDQ4ZTUxMjcxMTc0ZTRhZDY4MDQ5ZDVjNy00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.web",
              serviceTitle: "深度大扫除",
              serviceDesc: "日常家庭清洁和整理",
              serviceTip: "不包括：外窗清洁、橱柜内部及家电深度清洁。",
              servicePrice: "100元起",
            },
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "深度大扫除",
              serviceDesc: "日常家庭清洁和整理",
              serviceTip: "不包括：外窗清洁、橱柜内部及家电深度清洁。",
              servicePrice: "70元起",
            },
          ],
        },
        {
          title: "清洗服务",
          services: [
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9mZGQ5OTM4ZmE2OWJiZTllMDcxMGFhOTQzN2EzM2JmZi00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "空调清洗",
              serviceDesc: "双重清洁剂去污，高温消毒，延长使用寿命，",
              serviceTip: "和家人一起轻松呼吸。",
              servicePrice: "140元起",
            },
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9kMDc0YWJmNDA1NGE2YzExNmI3MmJlN2MwZTdmZDAxOS00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "冰箱清洗",
              serviceDesc: "除冰、除味，高温消毒",
              serviceTip: "还您健康储食环境。",
              servicePrice: "200元起",
            },
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS84Y2FmZDNiMDEzZTAyMWFiMGJlNDQwMjdlNjdmMWJkNy00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "油烟机清洗",
              serviceDesc: "除油消毒，让您告别油烟熏呛，",
              serviceTip: "消除厨房安全。",
              servicePrice: "50元起",
            },
          ],
        },
        {
          title: "家具养护",
          services: [
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hNzI2YjdhZTY4YWYyZWQxMmY5ODRjMTllMjNkNWFhYi00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "地板护理",
              serviceDesc: "清除地板顽固污渍隔绝空气、水汽、灰尘，",
              serviceTip: "提高地板使用寿命。",
              servicePrice: "400元起",
            },
            {
              serviceImg:
                "https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8wOS9hM2I2MGZhMzQyMTQwNDQxZjYzMTUzZWNiY2Q3MjdkNi00MDB4MjMwLTkwLndlYnA_p_p100_p_3D.webp",
              serviceTitle: "沙发养护",
              serviceDesc: "清洁、去污、除垢，养护专业服务",
              serviceTip: "让沙发永葆清楚。",
              servicePrice: "210元起",
            },
            {
              isLast: true,
            },
          ],
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f3f8fa;
  &_top {
    margin: 20px 0;
    img {
      width: auto;
      height: auto;
      max-height: 100%;
    }
  }
  &_card {
    width: 1280px;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 0 40px 40px 40px;
    box-sizing: border-box;
    .card-title {
      line-height: 80px;
      font-size: 20px;
    }
    .card-content {
      display: flex;
      justify-content: space-between;
      .card-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30%;
        border: 1px solid rgba(239, 239, 239, 1);
        img {
          width: 100%;
        }
        .item-title {
          font-size: 17px;
          line-height: 34px;
        }
        .item-desc {
          font-size: 14px;
          line-height: 28px;
          color: #999;
        }
        .item-tip {
          font-size: 14px;
          line-height: 28px;
          color: #999;
        }
        .item-price {
          font-size: 15px;
          line-height: 28px;
          color: rgb(230, 69, 74);
        }
        .item-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          height: 40px;
          background-color: rgb(230, 69, 74);
          color: #fff;
          font-weight: bold;
          font-size: 14px;
          border-width: 2px;
          border-radius: 5px;
          margin-bottom: 30px;
        }
      }
      .card-item:hover {
        box-shadow: 2px 2px 6px #888888;
      }
      .no-border {
        border: none;
      }
      .no-border:hover {
        box-shadow: none;
      }
      .no-btn {
        display: none !important;
      }
    }
  }
}
a {
  color: #42b983;
}
</style>
